<template>
  <div class="MentorTreatmentTypeAnalyze item5">
    <!-- 门特待遇类型分布-->
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <el-row :gutter="12">
              <el-col :md="16" :lg="16" :xl="12">
                <el-form-item label="时间区间" prop="priceTime">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :md="12" :lg="5" :xl="5">
                <el-form-item label="医疗机构级别" label-width="109px" prop="medinsLv">
                  <el-select
                    v-model="searchForm.medinsLv"
                    clearable
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in medinsLvOptions"
                      :key="item.dictValue"
                      :label="item.dictValue"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="5" :xl="5">
                <el-form-item label="人员类型" label-width="109px" prop="psnType">
                  <el-select
                    v-model="searchForm.psnType"
                    clearable
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in psnTypeOptions"
                      :key="item.dictValue"
                      :label="item.dictValue"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="5" :xl="5">
                <el-form-item label="二级人员类型" label-width="109px" prop="scdPsnType">
                  <el-select
                    v-model="searchForm.scdPsnType"
                    clearable
                    placeholder="请选择"
                    style="width:100%"
                    @change="scdPsnTypeChange"
                  >
                    <el-option
                      v-for="item in scdPsnTypeOptions"
                      :key="item.dictValue"
                      :label="item.dictValue"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="5" :xl="6">
                <el-form-item label="三级人员类型" label-width="109px" prop="lv3PsnType">
                  <el-select
                    v-model="searchForm.lv3PsnType"
                    clearable
                    placeholder="请选择"
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in lv3PsnTypeOptions"
                      :key="item.dictValue"
                      :label="item.dictValue"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="3" :xl="3">
                <el-button @click="restSearch('searchForm')">重置</el-button>
                <el-button type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div />
      </div>
    </section>
    <section class="layer ts">
      <el-row :gutter="12">
        <el-col :span="24">
          <div class="box">
            <div class="box-header handle">
              <span class="box-title">门特待遇单位类型对比</span>
            </div>
            <comparison-treatment-types v-loading="chartLoading" :axis-data="AxisData" :series-data="SeriesData" />
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
// import diseaseChart from '@/components/Charts/MentorDiseaseChart'
import PriceTime from '../components/PriceTime'
import ComparisonTreatmentTypes from './components/comparison-treatment-types'
import { getAll } from '@/api/assist-decision/mentorTreatmentTypeAnalyze'
export default {
  name: 'MentorTreatmentTypeAnalyze',
  components: {
    // diseaseChart, // 门特疾病分析点状图
    'price-time': PriceTime,
    'comparison-treatment-types': ComparisonTreatmentTypes
  },
  data() {
    return {
      chartLoading: false,
      searchForm: {
        beginDate: null,
        endDate: null, // 时间区间
        medinsLv: null, // 医疗机构级别
        psnType: null, // 人员类型
        scdPsnType: null, // 二级人员类型
        lv3PsnType: null // 三级人员类型
      },
      AxisData: [],
      SeriesData: []
    }
  },
  computed: {
    medinsLvOptions: function() {
      return this.$store.getters.selectMaps.MEDINS_LV
    },
    psnTypeOptions: function() {
      return this.$store.getters.selectMaps.PSN_TYPE
    },
    scdPsnTypeOptions: function() {
      return this.$store.getters.selectMaps.SCD_PSN_TYPE
    },
    lv3PsnTypeOptions: function() {
      return this.$store.getters.selectMaps.LV3_PSN_TYPE
    }
  },
  mounted() {
  },
  methods: {
    handleChange() {},
    //  二级人员类型选择改变
    scdPsnTypeChange(v) {
      this.searchForm.lv3PsnType = null
      if (v === '1') {
        this.lv3PsnTypeOptions.forEach((item) => {
          if (item.dictCode === '4') {
            this.$set(item, 'disabled', true)
          } else {
            this.$set(item, 'disabled', false)
          }
        })
      } else if (v === '2') {
        this.lv3PsnTypeOptions.forEach(item => {
          if (item.dictCode !== '4') {
            this.$set(item, 'disabled', true)
          } else {
            this.$set(item, 'disabled', false)
          }
        })
      }
    },
    priceTimeChange(v) {
      this.searchForm.beginDate = v[0] || null
      this.searchForm.endDate = v[1] || null
    },
    // 重置
    restSearch(formName) {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs[formName].resetFields()
      this.AxisData = []
      this.SeriesData = []
    },
    search() {
      this.getTableData()
      this.chartLoading = true
    },
    getTableData() {
      const params = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        lv3PsnType: this.searchForm.lv3PsnType,
        medinsLv: this.searchForm.medinsLv,
        psnType: this.searchForm.psnType,
        scdPsnType: this.searchForm.scdPsnType
      }
      getAll(params).then(res => {
        const newData = []
        res.data.forEach(item => {
          newData.push([item.psnTime, item.sumFee])
        })
        this.AxisData = newData
        console.log(res)
        console.log(this.AxisData)
        // this.SeriesData = res.data.map(item => {
        //   return { psnTime: item.psnTime, sumFee: item.sumFee }
        // })
        this.chartLoading = false
      }).catch(() => {
        this.chartLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
section:last-child .el-form .el-row:last-child .el-col:last-child {
  font-size: 0;
  text-align: right;
}
</style>

